<template>
  <div class="app">
    <div class="content">
      <div class="content-row">
        <div @click="toChallenge" class="challenge"></div>
        <div class="material" @click="toMaterial"></div>
        <div class="exam" @click="toExamMain"></div>
        <div class="evaluate" @click="toEvluate"></div>
      </div>
    </div>
    <div class="return" @click="back"></div>
  </div>
</template>

<script>
import { BizExamController, BizEvluateRecordController } from '@/api';
export default {
  name: 'course',
  data() {
    return {
      personnelType: null,
      moduleType: null
    };
  },
  methods: {
    toChallenge() {
      this.moduleType = 2;
      this.$router.replace({
        name: 'frontChallenge',
        query: { personnelType: this.personnelType }
      });
    },
    toMaterial() {
      this.moduleType = 4;
      this.$router.replace({
        name: 'frontMaterial',
        query: { personnelType: this.personnelType }
      });
    },
    toExamMain() {
      this.$router.replace({
        name: 'examMain',
        query: {
          sceneType: this.sceneType,
          moduleType: this.moduleType,
          personnelType: this.personnelType
        }
      });
    },
    toEvluate() {
      this.moduleType = 5;
      let params = {
        moduleType: this.moduleType,
        personnelType: this.personnelType
      };
      BizEvluateRecordController.exist(this, params)
        .then(res => {
          if (res.data && res.data.records) {
            this.$router.replace({
              name: 'evluateResultView',
              query: {
                sceneType: this.sceneType,
                moduleType: this.moduleType,
                personnelType: this.personnelType
              }
            });
          } else {
            this.$router.replace({
              name: 'evluateView',
              query: {
                sceneType: this.sceneType,
                moduleType: this.moduleType,
                personnelType: this.personnelType
              }
            });
          }
        })
        .catch(e => {
          console.error(e);
        });
    },
    back() {
      if (this.personnelType === 2) {
        this.$router.replace({ name: 'customLogin' });
      } else if (this.personnelType === 3) {
        this.$router.replace({ name: 'enterpriseLogin' });
      } else {
        this.$router.replace({ name: 'courseLogin' });
      }
    }
  },
  mounted() {
    const personnelType = this.$route.query.personnelType;
    this.personnelType = personnelType;
  }
};
</script>

<style type="scss" scoped>
.app {
  background-image: url('~@/assets/img/bg.png');
  background-size: cover;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 让父容器充满整个视口高度 */
}
.content {
  width: 80%;
  height: 45%;
}
.content-row {
  display: flex;
  height: 100%;
}
.content-row > div {
  display: flex;
  cursor: pointer;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  margin: 0 3%;
  width: 22%;
  height: 100%;
  font-size: 18px;
  text-align: center;
  vertical-align: middle;
  background-size: cover;
}
.challenge {
  background-image: url('~@/assets/img/changlle.png');
}
.material {
  background-image: url('~@/assets/img/ziliao.png');
}
.exam {
  background-image: url('~@/assets/img/xueyuan.png');
}
.evaluate {
  background-image: url('~@/assets/img/pinggu.png');
}
.return {
  width: 252px;
  height: 66px;
  background-image: url('~@/assets/img/return.png');
  background-size: cover;
  position: absolute;
  bottom: 5%;
  cursor: pointer;
}
</style>
